const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    mode:'development',//开发环境
    entry:'./src/main.js',//入口文件
    output:{
        path:__dirname+'/dist',//输出路径
        filename:'js/[name].js'//输出文件名
    },
    plugins: [new HtmlWebpackPlugin({//配置让webpack能够生成html文件
        template:__dirname+'/index.html',//读取的html文件的路径
        filename:'index.html',//输出的html文件的名字
        title:'手动配置 webpack',//可以配置html中的title，使其为整个名字
    })],
    devServer:{//让webpack实时刷新指定的html文件
        port:3000,
        open:true,
        static:__dirname+'/dist',//指定刷新的html文件的目录地址
    },
    module:{//配置webpack的加载器
        rules:[//配置加载器的规则
            {
                test:/\.js$/,//需要降级的文件类型
                exclude:/node_modules/,//排除的文件
                use:{
                    loader:'babel-loader',//使用的加载器
                    options:{//配置加载器的选项
                        presets:['@babel/preset-env']//配置babel的预设环境
                    }

                }
            }
        ]
    }


}